<template>
  <div style="padding:30px;">
    <div id="viewer-host">
      <JSViewer ref="reportViewer" language="zh"></JSViewer>
    </div>
  </div>
</template>
<script >
import {Viewer, ViewerType} from '@grapecity/activereports-vue';
import '@grapecity/activereports/styles/ar-js-viewer.css';
import '@grapecity/activereports/styles/ar-js-ui.css';
import '@grapecity/activereports';
import "@grapecity/activereports-localization/dist/designer/zh-locale";
export default {
  name: "Login",
  components: {
    JSViewer: Viewer,
  },
  data() {
    return {
      reportZoom: 'FitPage',
    }
  },
  methods:{
    loadData: async function(){
      //使用Fetch Api提取数据 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
      const headers = new Headers();

      const dataRequest = new Request(
        "https://jsonplaceholder.typicode.com/comments",
        {
          headers: headers,
        }
      );

      const response = await fetch(dataRequest);
      const data = await response.json();
      return data;
    },
    loadReport: async function(){
      //从文件加载定义报表
      const reportResponses = await fetch( "https://wshalo.oss-cn-chengdu.aliyuncs.com/2020-09/MarketSnapshot.json");
      const json='{"Name":"Report","Width":"19cm","ReportParameters":[{"DataType":"String","Hidden":true,"Name":"ID","Prompt":"id值"}],"Layers":[{"Name":"default"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"21cm","PageHeight":"29.7cm","RightMargin":"1cm","LeftMargin":"1cm","TopMargin":"1cm","BottomMargin":"1cm","Columns":1,"ColumnSpacing":"0cm"},"DataSources":[{"Name":"DataSource","ConnectionProperties":{"DataProvider":"JSON","ConnectString":"=jsondoc=https://jsonplaceholder.typicode.com/comments?id=& Parameters!ID.Value"}},{"Name":"列表","ConnectionProperties":{"DataProvider":"JSON","ConnectString":"endpoint=https://jsonplaceholder.typicode.com/comments"}}],"Body":{"Height":"27.5cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","ZIndex":1,"DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"=Globals!ExecutionTime","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"14.691cm","Top":"26.249cm","Width":"3.497cm","Height":"1.251cm"},{"Type":"textbox","Name":"TextBox2","ZIndex":2,"DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"=Globals!PageNumber","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"10.688cm","Top":"26.488cm","Width":"2.5cm","Height":"0.75cm"},{"Type":"textbox","Name":"TextBox3","ZIndex":3,"DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"=Globals!TotalPages","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"7.189cm","Top":"26.488cm","Width":"2.5cm","Height":"0.75cm"},{"Type":"table","Name":"表格1","ZIndex":4,"DataSetName":"DataSet1","TableColumns":[{"Width":"2cm"},{"Width":"7cm"},{"Width":"7cm"}],"Header":{"TableRows":[{"Height":"0.75cm","TableCells":[{"Item":{"Type":"textbox","Name":"文本框1","DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"id序号","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center"},"Left":"0cm","Top":"0cm","Width":"2cm","Height":"0.75cm"}},{"Item":{"Type":"textbox","Name":"文本框2","DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"名字","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center"},"Left":"0cm","Top":"0cm","Width":"7cm","Height":"0.75cm"}},{"Item":{"Type":"textbox","Name":"文本框3","DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"邮箱","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center"},"Left":"0cm","Top":"0cm","Width":"7cm","Height":"0.75cm"}}]}],"RepeatOnNewPage":true},"Details":{"TableRows":[{"Height":"0.75cm","TableCells":[{"Item":{"Type":"textbox","Name":"文本框4","DataElementName":"id序号","CanGrow":true,"KeepTogether":true,"Value":"=Fields!id序号.Value","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center"},"Left":"0cm","Top":"0cm","Width":"2cm","Height":"0.75cm"}},{"Item":{"Type":"textbox","Name":"文本框5","DataElementName":"名字","CanGrow":true,"KeepTogether":true,"Value":"=Fields!名字.Value","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center"},"Left":"0cm","Top":"0cm","Width":"7cm","Height":"0.75cm"}},{"Item":{"Type":"textbox","Name":"文本框6","DataElementName":"邮箱","CanGrow":true,"KeepTogether":true,"Value":"=Fields!邮箱.Value","Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center"},"Left":"0cm","Top":"0cm","Width":"7cm","Height":"0.75cm"}}]}]},"Left":"1.5cm","Top":"4.5cm","Width":"16cm","Height":"1.5cm"},{"Type":"textbox","Name":"文本框7","ZIndex":5,"DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"测试参数传递报表","Style":{"FontWeight":"SemiBold","PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center","VerticalAlign":"Middle"},"Left":"7.503cm","Top":"2.253cm","Width":"5cm","Height":"0.75cm"},{"Type":"table","Name":"表格2","ZIndex":7,"DataSetName":"列表","Style":{"Border":{"Style":"Solid"}},"TableColumns":[{"Width":"4.99cm"},{"Width":"5.336cm"},{"Width":"5.336cm"},{"Width":"3.338cm"}],"Header":{"TableRows":[{"Height":"0.75cm","TableCells":[{"Item":{"Type":"textbox","Name":"文本框8","DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"编号","Style":{"Border":{"Style":"Solid"},"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center","VerticalAlign":"Middle"},"Left":"0cm","Top":"0cm","Width":"4.99cm","Height":"0.75cm"}},{"Item":{"Type":"textbox","Name":"文本框9","DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"名字","Style":{"Border":{"Style":"Solid"},"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center","VerticalAlign":"Middle"},"Left":"0cm","Top":"0cm","Width":"5.336cm","Height":"0.75cm"}},{"Item":{"Type":"textbox","Name":"文本框10","DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"邮箱","Style":{"Border":{"Style":"Solid"},"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center","VerticalAlign":"Middle"},"Left":"0cm","Top":"0cm","Width":"5.336cm","Height":"0.75cm"}},{"Item":{"Type":"textbox","Name":"文本框14","DataElementName":"TextBox1","CanGrow":true,"KeepTogether":true,"Value":"二维码","Style":{"Border":{"Style":"Solid"},"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center"},"Left":"0cm","Top":"0cm","Width":"3.338cm","Height":"0.75cm"}}]}],"RepeatOnNewPage":true},"Details":{"TableRows":[{"Height":"3.5cm","TableCells":[{"Item":{"Type":"textbox","Name":"文本框11","DataElementName":"编号","CanGrow":true,"KeepTogether":true,"Value":"=Fields!编号.Value","Style":{"Border":{"Style":"Solid"},"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center","VerticalAlign":"Middle"},"Left":"0cm","Top":"0cm","Width":"4.99cm","Height":"3.5cm"}},{"Item":{"Type":"textbox","Name":"文本框12","DataElementName":"名字","CanGrow":true,"KeepTogether":true,"Value":"=Fields!名字.Value","Style":{"Border":{"Style":"Solid"},"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center","VerticalAlign":"Middle"},"Left":"0cm","Top":"0cm","Width":"5.336cm","Height":"3.5cm"}},{"Item":{"Type":"textbox","Name":"文本框13","DataElementName":"邮箱","CanGrow":true,"KeepTogether":true,"Value":"=Fields!邮箱.Value","Style":{"Border":{"Style":"Solid"},"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt","TextAlign":"Center","VerticalAlign":"Middle"},"Left":"0cm","Top":"0cm","Width":"5.336cm","Height":"3.5cm"}},{"Item":{"Type":"barcode","Name":"条形码2","ZIndex":12,"Value":"=Fields!编号.Value","Symbology":"QRCode","QrCodeOptions":{"Version":2},"QuietZone":{"Left":"0cm","Right":"0cm","Top":"0cm","Bottom":"0cm"},"SupplementOptions":{"Spacing":"0cm"},"Style":{"Border":{"Style":"Solid"},"BottomBorder":{"Color":"#f44336"},"FontFamily":"Courier New","FontSize":"8pt","TextAlign":"Center"},"Left":"0cm","Top":"0cm","Width":"3.338cm","Height":"3.5cm"}}]}]},"Left":"0cm","Top":"7cm","Width":"19cm","Height":"4.25cm"},{"Type":"image","Name":"图片1","ZIndex":8,"Value":"http://8.135.118.71:8081/Content/images/unify.png","Sizing":"Clip","Left":"0cm","Top":"0cm","Width":"7.503cm","Height":"3.003cm"}]},"DataSets":[{"Name":"DataSet1","Fields":[{"Name":"postId","DataField":"postId"},{"Name":"id序号","DataField":"id"},{"Name":"名字","DataField":"name"},{"Name":"邮箱","DataField":"email"},{"Name":"body","DataField":"body"}],"Query":{"DataSourceName":"DataSource","CommandText":"jpath=$.*"},"CaseSensitivity":"Auto","KanatypeSensitivity":"Auto","AccentSensitivity":"Auto","WidthSensitivity":"Auto"},{"Name":"列表","Fields":[{"Name":"postId","DataField":"postId"},{"Name":"编号","DataField":"id"},{"Name":"名字","DataField":"name"},{"Name":"邮箱","DataField":"email"},{"Name":"body","DataField":"body"}],"Query":{"DataSourceName":"列表","CommandText":"jpath=$.*"},"CaseSensitivity":"Auto","KanatypeSensitivity":"Auto","AccentSensitivity":"Auto","WidthSensitivity":"Auto"}]}'
      const reportResponse = await fetch( "test.json");

      const report = await reportResponse.json();
      return report;
    }
  },
  mounted: async function(){
    const data = await this.loadData();
    const report = await this.loadReport();
   // report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);
    let tmp=this.$refs.reportViewer.Viewer();
    tmp.open(report,{ ReportParams: [{ Name: 'ID', Value: [2] }] });
    tmp.toggleSidebar();

  }
}
</script>
<style>
#viewer-host {
  width: 100%;
  height: 89vh;
}
</style>
